<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>
</head>

<script type="text/javascript">
document.domain="hyundai.com" ;





function vinNoInfoPopUp(obj) {

    
    $.ajax({
       type:'POST',
       url:'/kr/mbr/mbrVinNoInfoPopUp.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#vinNoInfoPopUp').html(html);
           insertVinNoInfoPopup(obj);
       }
    });

}

function insertVinNoInfoPopup(id){

    var html = document.getElementById("vinNoInfoPopUp").innerHTML;
    document.getElementById("vinNoInfoPopUp").innerHTML = "";
            
    var vinNoInfoPopup;
    vinNoInfoPopup = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "본인/휴대전화 인증",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    vinNoInfoPopup.openPopup(html);
    
}



function cnttNoInfoPopUp(obj) {

    
    $.ajax({
       type:'POST',
       url:'/kr/mbr/mbrCnttNoInfoPopUp.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#cnttNoInfoPopUp').html(html);
           insertCnttNoInfoPopup(obj);
       }
    });

}

function insertCnttNoInfoPopup(id){

    var html = document.getElementById("cnttNoInfoPopUp").innerHTML;
    document.getElementById("cnttNoInfoPopUp").innerHTML = "";
            
    var cnttNoInfoPopup;
    cnttNoInfoPopup = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "본인/휴대전화 인증",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    cnttNoInfoPopup.openPopup(html);
    
}


/*
function zipCodePopUp(obj) {

    
    $.ajax({
       type:'POST',
       url:'/kr/mbr/zipCodePopUp.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#zipCodePopUp').html(html);
          // alert(html);
           insertZipCodePopUp(obj);
       }
    });

}
*/



function zipCodePopUp(obj) {

   window.open("/kr/mbr/zipCodePopUp.do","우편번호찾기","top=500px,left=800px,height=800px,width=660px,scrollbars=yes,menubar=no,toolbar=no,status=no");
}



function insertZipCodePopUp(id){

    var html = document.getElementById("zipCodePopUp").innerHTML;
    document.getElementById("zipCodePopUp").innerHTML = "";
            
    var zipCodePopUp;
    zipCodePopUp = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    zipCodePopUp.openPopup(html);
    
}













function AddInfoComplete(){
    var frm = $("#extMbrAddInfoForm")[0];
    var mbrSn= document.getElementById("mbrSn");
 // alert(mbrSn.value);


   
  //  var zipSn1 = document.getElementById("zipSn01");
    //frm.zipSn1.value = zipSn1.value;
    
  //  if(zipSn1.value =""){
  //      alert("우편번호를 검색하여 주십시요");
  //      return ;
  //  }
   // var zipSn2 = document.getElementById("zipSn02");
   // frm.zipSn2.value = zipSn2.value;
    
    //var adr = document.getElementById("adr0");
    //frm.adr.value = adr.value;
    
    //var dtlAdr = document.getElementById("dtlAdr0");
    //frm.dtlAdr.value = dtlAdr.value;
    
   // var cnttNo = document.getElementById("cnttNo");
   // frm.cnttNo.value = cnttNo.value;
    
    //var vinNo = document.getElementById("vinNo");
   // frm.vinNo.value = vinNo.value;
    /*
    frm.zipSn2.value = frm.zipSn02.value;
    frm.adr.value = frm.adr0.value;
    frm.dtlAdr.value = frm.dtlAdr0.value;
    frm.cnttNo.value = frm.cnttNo0.value;
    frm.vinNo.value = frm.vinNo0.value;
    */
    /*
    var yyyy = document.getElementById("yyyy");
    
    if(yyyy.value= =""){
        alert("년도를 선택하여 주십시요");
        yyyy.focus();
        return ;
    }
    
    var mm = document.getElementById("mm");
    
    if(mm.value ==""){
        alert("월을 선택하여 주십시요");
        mm.focus();
        return ;
    }
    
    
    var dd = document.getElementById("dd");
    
    if(dd.value ==""){
        alert("일을 선택하여 주십시요");
        dd.focus();
        return ;
    }    
    
    var mbrSex = document.getElementById("mbrSex");
    
    if(mbrSex.value ==""){
        alert("성별을 선택하여 주십시요");
        mbrSex.focus();
        return ;
    }
    */
     frm.action="<c:url value='/mbr/updateMbrAddInfo.do'/>";
    
    frm.submit();
}


function AddrConfirm(ZipScn,ZipSn01,ZipSn02,addr,dtlAdr){

    document.extMbrAddInfoForm.zipScn.value = ZipScn;
    
    document.extMbrAddInfoForm.zipSn01.value = ZipSn01;      
    document.extMbrAddInfoForm.zipSn02.value = ZipSn02;   
    
    document.extMbrAddInfoForm.adr.value = addr;   
    document.extMbrAddInfoForm.dtlAdr.value =dtlAdr;  
    
}


function vinNoCheck()
{     
    


    // alert($("#pw1").val());    
   var vinNo = document.getElementById("vinNo");

  //2. 특수문자가 입력되었는지 체크한다.
           
    var regEx_cnttNo = new RegExp("[^a-zA-Z0-9]");
    //특수문자 입력여부 체크       
    var result_cnttNO = regEx_cnttNo.exec(vinNo.value);
     if(result_cnttNO)
    {
        alert("차대번호는 영/숫자만 가능합니다.");
        vinNo.value = "";
        vinNo.focus();
        return false;
    }
            

}


function fnUpper(){
    var obj =document.getElementById("vinNo");
    obj.value = obj.value.toUpperCase();
    vinNoCheck();
}





</script>


<body>

 
<%@ include file="/WEB-INF/jsp/com/include/navi_utill_sub.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/navi_header.jspf" %>

<div id="wrap" class="non-subnavigation02">

    <hr />
    <%@ include file="/WEB-INF/jsp/com/include/sub_header_global02_type02.jspf" %>

    <hr />
<form id="extMbrAddInfoForm" name="extMbrAddInfoForm" method="post">
<input type="hidden" name="zipScn" id="zipScn" value="">
<!-- 
<input type="hidden" name="zipSn1" id="zipSn1" value="">
<input type="hidden" name="zipSn2" id="zipSn2" value="">

<input type="hidden" name="adr"    id="adr" value="">
<input type="hidden" name="dtlAdr" id="dtlAdr" value="">
<input type="hidden" name="cnttNo" id="cnttNo" value="">
<input type="hidden" name="vinNo"   id="vinNo"  value="">
 -->
<input type="hidden" name="mbrSn" id="mbrSn" value="${mbrInfoVO.mbrSn}">
<input type="hidden" name="wpaNm" id="wpaNm" value="">
<input type="hidden" name="admzNm" id="admzNm" value="">
	<div id="container">
		<div id="subtitle-area"><div class="subtitle-area-inner">
			<%@ include file="/WEB-INF/jsp/com/include/location.jspf" %>
		</div></div>
		<div id="article">
            <p><img src="/kr/images/global_menu/img_join_process_type02_04.gif" alt="신 회원제 변경 완료" /></p>
            <p class="subsection"><img src="/kr/images/global_menu/img_global_menu02_type02_04_01.gif" alt="현대자동차 홈페이지 회원전환 절차가 완료 되었습니다. 현대자동차의 다양한 서비스를 편리하게 이용 하실 수 있습니다." /></p>
			<div class="complete-email">
				<img src="/kr/images/global_menu/txt_global_menu02_type02_04_01.gif" alt="회원님의 현대자동차 홈페이지 신 회원 이메일아이디는" />
				<em>${mbrInfoVO.mbrEml}</em>
				<img src="/kr/images/global_menu/txt_global_menu02_04_02.gif" alt="입니다." />
			</div>
			<h5 class="subsection"><img src="/kr/images/title/h5_global_menu02_04_01.gif" alt="이용편의정보" /></h5>
			<p><img src="/kr/images/global_menu/txt_global_menu02_04_03.gif" alt="미리 입력하여 주시면 현대자동차 홈페이지를 편리하게 이용하실 수 있습니다." /></p>
			<div class="convenience-service-info subsection02">
				<div class="cell">
					<h6><img src="/kr/images/title/h6_global_menu02_04_01.gif" alt="기본 주소" /></h6>
					<p class="desc"><img src="/kr/images/global_menu/txt_global_menu02_04_04.gif" alt="카탈로그 신청, 시승, 이벤트, 구매상담 이용 시 활용됩니다." /></p>
					<div class="boardwrite-wrap02">
						<table summary="우편번호, 주소, 상세주소">
						<caption>기본 주소 입력</caption>
						<colgroup>
							<col width="20%" />
							<col />
						</colgroup>
						<tbody>
						<tr>
							<th scope="row"><img src="/kr/images/global_menu/txt_global_menu02_04_07.gif" alt="우편번호 주소 상세주소" /></th>
							<td>
								<input type="text" class="txt" style="width:52px;" id="zipSn01"  name="zipSn01" readonly/>
								-
								<input type="text" class="txt" style="width:52px;" id="zipSn02" name="zipSn02" readonly/>
								<a href="javascript:zipCodePopUp('zipCode');"><img src="/kr/images/common/button/btn_zipcode.gif" alt="우편번호" /></a>
								<p class="sect">
									<input type="text" class="txt" style="width:310px;" id="adr" name="adr" readonly/>
								</p>
								<p class="sect">
									<input type="text" class="txt" style="width:310px;" id="dtlAdr" name="dtlAdr" readonly/>
								</p>
							</td>
						</tr>
						<tr>
							<th scope="row"><img src="/kr/images/global_menu/txt_global_menu02_04_09.gif" alt="생년월일" /></th>
							<td>
								<select  class="select select-type1" style="width:60px;" id="yyyy" name="yyyy">
                            <option value=''>년도</option>
                            <% 
                            for(int i = 2014 ; i >=  1900 ; i--){
                             %>
                               <option value="<%=i%>" > <%= i%></option>
                             <% 
                            }
                            %>   
								</select>
								년
								<select class="select select-type1"  style="width:56px;" id="mm" name="mm">
									<option value="" selected>월</option>
                                    <option value="01">01</option>
                                    <option value="02">02</option>
                                    <option value="03">03</option>
                                    <option value="04">04</option>
                                    <option value="05">05</option>
                                    <option value="06">06</option>
                                    <option value="07">07</option>
                                    <option value="08">08</option>
                                    <option value="09">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>

								</select>
								월
								<select class="select select-type1"  style="width:56px;" id="dd" name="dd">
                                    <option value="" selected>일</option>
                                    <option value="01">01</option>
                                    <option value="02">02</option> 
                                    <option value="03">03</option> 
                                    <option value="04">04</option> 
                                    <option value="05">05</option> 
                                    <option value="06">06</option> 
                                    <option value="07">07</option> 
                                    <option value="08">08</option> 
                                    <option value="09">09</option> 
                                    <option value="10">10</option> 
                                    <option value="11">11</option> 
                                    <option value="12">12</option> 
                                    <option value="13">13</option> 
                                    <option value="14">14</option> 
                                    <option value="15">15</option> 
                                    <option value="16">16</option> 
                                    <option value="17">17</option> 
                                    <option value="18">18</option> 
                                    <option value="19">19</option> 
                                    <option value="20">20</option> 
                                    <option value="21">21</option> 
                                    <option value="22">22</option> 
                                    <option value="23">23</option> 
                                    <option value="24">24</option> 
                                    <option value="25">25</option> 
                                    <option value="26">26</option> 
                                    <option value="27">27</option> 
                                    <option value="28">28</option> 
                                    <option value="29">29</option> 
                                    <option value="30">30</option> 
                                    <option value="31">31</option> 

								</select>
								일
							</td>
						</tr>
						<tr>
							<th scope="row"><img src="/kr/images/global_menu/txt_global_menu02_04_10.gif" alt="성별" /></th>
							<td>
								<select  class="select select-type1" style="width:56px;" id="mbrSex" name="mbrSex">
                                    <option value="" selected>성별</option>
                                    <option value="M" >남</option>
                                    <option value="F">여</option>
								</select>
							</td>
						</tr>
						</tbody>
						</table>
					</div>
				</div>
				<div class="cell">
					<h6><img src="/kr/images/title/h6_global_menu02_04_02.gif" alt="차량 정보" /></h6>
					<p class="desc"><img src="/kr/images/global_menu/txt_global_menu02_04_05.gif" alt="상담 및 이벤트 응모 시 편리하게 이용하실 수 있습니다." /></p>
					<div class="boardwrite-wrap02">
						<table summary="계약번호 or 차대번호">
						<caption>차량 정보 작성</caption>
						<colgroup>
							<col width="20%" />
							<col />
						</colgroup>
						<tbody>
						<tr>
							<th scope="row"><img src="/kr/images/global_menu/txt_global_menu02_04_08.gif" alt="계약번호 or 차대번호" /></th>
							<td>
								<p class="sect02">
									<input type="text" class="txt" style="width:270px;" name="vinNo" id="vinNo" maxlength="17" onkeyUp="fnUpper()" />
								</p>
								<p class="sect02">
									<input type="text" class="txt" style="width:270px;" name="cnttNo" id="cnttNo" maxlength="15"/>
								</p>
							</td>
						</tr>
						</tbody>
						</table>
					</div>
					<div class="agree-check-wrap">
						<p class="agree-check">
							* 차대번호는 17자리 영문+숫자로 구성되어 있습니다.<br />
							예 &gt; KMCD1234ABCDE1234
						</p>
						<p class="agree-check">
							* 등록번호는 차량 번호 입니다.<br />
							예 &gt; 00가 0000
						</p>
						<p class="agree-check">
							* 자세한 내용은 안내 페이지를 참조하여 차대번호 , 등록번호를 넣어주세요.
						</p>
					</div>
				</div>
			</div>
			<div class="sns-service-setting subsection">
				<h5><img src="/kr/images/title/h5_global_menu02_04_02.gif" alt="소셜 서비스 연동" /></h5>
				<p><img src="/kr/images/global_menu/txt_global_menu02_04_06.gif" alt="현대자동차 홈페이지 내 여러가지 소셜 앱(Social App)들을 회원님 SNS 계정으로 편리하게 이용하실 수 있습니다." /></p>
				<div class="sns-area">
                    <script type="text/javascript" charset="utf-8" src="${snsHttpsDomain}/sns/pub?type=3&pageCode=${pageCode}&js=1&uKey=${fnc:encryptCb(mbrInfoVO.mbrSn) }"></script>

				</div>
			</div>
			<div class="btnwrap">
				<a href="javascript:AddInfoComplete();"><img src="/kr/images/common/button/btn_join_complete.gif" alt="회원가입 완료" /></a>
			</div>
		</div>
	</div>
	<hr />
        <div id="vinNoInfoPopUp"  style="display:none"></div>
    <div id="cnttNoInfoPopUp"  style="display:none"></div>

    <div id="zipCodePopUp"   style="display:none"></div>
    
	<%@ include file="/WEB-INF/jsp/com/include/footer.jspf" %>